<template>
    <div class="login">
        <div class="content-left">
            <div class="system-name">管理后台系统</div>
            <div class="system-desc">Operation management backend system</div>
        </div>
        <div class="content-right">
            <sib-form size="large" :fields="fields" @submit="submit" :is-reset="false" submit-text="登 录"></sib-form>
        </div>
    </div>
</template>

<script>
import { ref, inject } from 'vue';
import { useRouter } from 'vue-router';
import { ElLoading } from 'element-plus';
import tools from '@/utils/tools';

const { setToken, setRefreshToken } = tools;

export default {
    name: 'LoginPage',
    setup() {
        const router = useRouter();
        const $axios = inject('$axios');
        const fields = ref([
            {
                code: '_title',
                type: 'label',
                value: '账号密码登录',
            },
            {
                code: 'username',
                type: 'text',
                maxlength: 30,
                required: true,
            },
            {
                code: 'password',
                type: 'password',
                maxlength: 20,
                required: true,
            },
        ]);

        const submit = async (form, cb) => {
            await $axios.get('http://api-dashboard.yudao.iocoder.cn/admin-api/system/tenant/get-id-by-name?name=芋道源码');
            const params = { ...form, tenantName: '芋道源码', rememberMe: true };
            const ElLoadingInstance = ElLoading.service({
                lock: true,
                text: '安全认证中...',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            $axios.post('/system/auth/login', params).then((res) => {
                const { accessToken, refreshToken } = (res.data || {}).data || {};
                setToken(accessToken);
                setRefreshToken(refreshToken);
                router.replace('/');
            }).finally(() => {
                ElLoadingInstance.close();
                cb();
            });
        };

        return { fields, submit };
    },
};
</script>

<style lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    padding: 50px;
    background: url(../assets/images/login_bg.png);
    background-size: cover;
    display: flex;
    align-items: center;
    color: #333;
    .content-left {
        width: 50%;
        height: 400px;
        padding-left: 160px;
        margin: 0 auto;
        font-size: 44px;
        line-height: 60px;
        .system-name {
            font-weight: 600;
        }
        .system-desc {
            font-size: 16px;
            color: #999;
        }
    }
    .content-right {
        width: 50%;
        display: flex;
        .form-title {
            margin-bottom: 40px;
            color: #333;
            font-size: 18px;
            font-weight: bold;
        }
        .sib-form {
            width: 400px;
            padding: 50px 40px;
            padding-top: 40px;
            border-radius: 8px;
            margin: auto;
            background: #fff;
            .sib-item___title {
                .sib-item-content {
                    font-size: 18px;
                }
            }
            .sib-form-item__operations {
                .submit-btn {
                    width: 100%;
                }
            }
        }
    }
}
</style>
